import * as React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { StoreState } from '@/store/reducers'
import { IPage, IPageDataQuery } from "@/types"
import { IProjectListItem, IProjectQueryParams } from '@/api'
import ProjectAdd from "./components/ProjectAdd"
import { Table, Tooltip, Icon, Modal } from "antd"
import * as actions from '@/store/actions'
import { bindActionCreators, Dispatch } from 'redux'
import { IAction } from '@/types';
import ProjectSearch from './components/ProjectSearch';
import style from './ProjectList.less';

interface Props {
	projectList: IProjectListItem[],
	doAddProjectToggle: () => {},
	doDeleteProject: (projectId: number) => {}
	projectPage: IPage,
	doGetProjectList: (data: IPageDataQuery<IProjectQueryParams>) => {}
}


function ProjectList({ projectList, projectPage: { page, pageSize, totalCount }, ...props }: Props) {

	const columns = [{
		title: '项目名称',
		dataIndex: 'name',
		key: 'name'
	}, {
		title: '项目语言',
		dataIndex: 'language',
		key: 'language'
	}, {
		title: '项目版本',
		dataIndex: 'version',
		key: 'version'
	}, {
		title: '项目描述',
		dataIndex: 'description',
		key: 'description',
		render: (desc: string) => <div style={{ maxWidth: 200 }}>{desc}</div>
	}, {
		title: '',
		dataIndex: 'id',
		key: 'action',
		render: (id: number, record: IProjectListItem) => (
			<div>
				<Tooltip placement='bottom' title='编辑'>
					<Link to={`/project/${id}`}>
						<Icon type="edit" />
					</Link>
				</Tooltip>
				<Tooltip placement='bottom' title='错误列表'>
					<Link to={`/dashboard/${id}`}>
						<Icon type='exclamation-circle' />
					</Link>

				</Tooltip>
				<Tooltip placement='bottom' title='删除'>
					<Icon type='delete' onClick={() => {
						Modal.confirm({
							title: '提示?',
							content: `确定要删除项目(${record.name})吗?`,
							okType: 'danger',
							onOk() {
								props.doDeleteProject(id);
							}
						})
					}} />
				</Tooltip>
			</div>
		)
	}]
	return (
		<div className={style.wrapper}>
			{/* <div className={style.action}>
				<Button type='primary' onClick={props.doAddProjectToggle}>新建项目</Button>
			</div> */}
			<ProjectSearch onAdd={props.doAddProjectToggle} onSearch={(data: IPageDataQuery<IProjectQueryParams>) => { props.doGetProjectList({ ...data }) }} />
			<div className={style.content}>
				<Table
					columns={columns}
					dataSource={projectList}
					rowKey='id'
					pagination={{
						total: totalCount,
						pageSize,
						current: page,
						showTotal: (total, range) => `共${total}条数据，当前显示第${range[0]}条至${range[1]}条数据`,
						onChange: (page, pageSize) => { props.doGetProjectList({ page, pageSize }) }

					}}
				/>
				{/* <div className={style.project}>
					{
						projectList.length === 0 ? <Empty /> : (
							projectList.map((project: IProjectListItem) => (
								<ProjectListPane onDelete={props.doDeleteProject} key={project.id} projectInfo={project} />
							))
						)
					}
				</div> */}
				{/* {
					totalCount > pageSize ? (
						<div className={style.pagination}>
							<Pagination
								current={page}
								pageSize={pageSize}
								total={totalCount}
								onChange={(page: number, pageSize: number) => { props.doGetProjectList({ page, pageSize }) }}
								showTotal={(total, range) => `共${total}条数据，当前显示第${range[0]}-${range[1]}条数据`}
							/>
						</div>
					) : null
				} */}

			</div>

			<ProjectAdd />
		</div>
	)
}



const mapStateToProps = (state: StoreState) => ({
	projectList: state.project.projectList,
	projectPage: state.project.projectPage
});

const mapDispatchToProps = (dispatch: Dispatch<IAction>) => bindActionCreators({
	doAddProjectToggle: () => actions.doAddProjectToggle(true),
	doDeleteProject: (projectId: number) => actions.doDeleteProjectRequest(projectId),
	doGetProjectList: (data: IPageDataQuery<IProjectQueryParams>) => actions.doGetProjectListRequest(data)
}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(ProjectList))
// export default connect(mapStateToProps, mapDispatchToProps)(ProjectList);